JS 陣列與物件常用方法

陣列常用的操作方式

• 宣告陣列
• 運用索引存取資料
• 列舉陣列內容: 搭配迴圈
• 按順序操作資料: push、pop、shift、unshift
• 從中間操作資料: splice (相似 slice:但不改變原有陣列)
• 合併兩個陣列: contact

宣告陣列

宣告空物件
const user = {} or let user = ""

使用方括號[] 和索引位置 array[n] 來讀取物件/陣列/字串的指定位置資料

排序第一個為 0 開始起算， 0, 1, 2, 3...
例如:

animal = ['dog','cat','bird' ]
console.log(animal[0])
// dog

除了讀取值外，也可用索引位置寫入新資料來取代原值

例如: 若要取代上面排序2 的 bird, 改成rabbit

animal = ['dog','cat','bird' ]
animal[2] = 'rabbit'
console.log(animal[2])
// rabbit

如果在陣列裡新增資料的話，可以直接寫成:

animal[3] = 'cow'
console.log(animal)
// ['dog','cat','rabbit','cow' ]

使用點記法object.屬性 或 **括號記法[''] **新增物件的數值

obj['key'] = 'value'
//括號記法(bracket notation)

使用 array.indexOf()會返回指定數值在陣列中出現的"第一個"位置，若沒有在陣列中則會返回"-1"

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// expected output: 1

其他改變陣列資料的常用方法:

array.push()

array.pop()

array.shift()

array.unshift()

(來源取自於Alpha Camp 2-1學習課程圖片)

let nums = [0,1,2,3,4]
nums.push(5)
console.log(nums)
//[0,1,2,3,4,5]

nums.pop()
console.log(nums)
//[0,1,2,3,4]

nums.shift()
console.log(nums)
//[1,2,3,4]

nums.unshift(0.5)
console.log(nums)
//[0.5,1,2,3,4]

array.splice() vs. array.slice

(來源取自於Alpha Camp 2-1學習課程圖片)

let nums = [0,1,2,3,4]
nums.splice(2,0,99) 
//[0,1,99,2,3,4]

此三個參數分別為:

• 第一個:要發生變化的索引位置
• 第二個:從索引位置開始算，總共要刪掉幾個數。此例為 0，代表不用刪除
• 第三個:從索引位置的地方需要新增的數字

splice()會改變原有的nums陣列，但若使用相似的slice()，可以取出陣列數值，但不改變原有陣列
slice() 方法會回傳一個新的陣列物件，為原陣列選擇從"開始"至"結束"(不含結束位置的數值)的淺拷貝(shallow copy)

arr.slice([begin[, end]])

const animals = ['dog','cat','rabbit','cow','sheep','lion']
console.log(animals.slice(2))
// 從第二個位置起開始出現至最後一個數值 (因為沒有結束的位置)
console.log(animals.slice(2,5))
//['rabbit','cow','sheep']
console.log(animals.slice(2,-1))
//可使用負數索引，表示由陣列的最末項開始提取。slice(2,-1) 代表拷貝陣列中第三個元素至倒數第二個元素。
//['rabbit','cow','sheep']
console.log(animals.slice(-2))
//slice(-2) 代表拷貝陣列中的最後兩個元素。假如 begin 為 undefined，則 slice 會從索引 0 開始提取。['sheep','lion']
console.log(animals.slice(-1))
//['lion']

array.concat 合併陣列

concat (不會改變原有陣列) vs push (新增數值至陣列，原有陣列被改變)

array.concat
// 回傳新的陣列

let daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
let newDaysOfWeek = daysOfWeek.concat(['Saturday', 'Sunday'])
console.log(daysOfWeek) // ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
console.log(newDaysOfWeek) // ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]

array.push
// 直接修改原本陣列

let daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
daysOfWeek.push('Saturday', 'Sunday')
console.log(daysOfWeek) // ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]

筆記學習資源: Alpha Camp, W3School